<template>
	<div>
		<van-tabs class="tabs" animated swipeable sticky>
			<van-tab :title="tab" v-for="tab in tabs" :key="tab">
				<div class="block-content p-2">
					<div class="list-item" v-for="i in 16" :key="i">
						<div class="item-thumb horizontal">
							<img src="https://via.placeholder.com/240x320" />
						</div>
						<div class="item-title large">123</div>
						<div class="item-desc van-multi-ellipsis--l2">这是一段最多显示两行的文字，多余的内容会被省略，这是一段最多显示两行的文字，多余的内容会被省略这是一段最多显示两行的文字</div>
						<div class="item-footer">
							<div class="item-rate">
								<van-rate v-model="value" void-icon="star" size="12" />
								<span>{{ value }}</span>
							</div>
							<div class="item-view">
								<span>
									<van-icon name="good-job" />3230
								</span>
								<span>
									<van-icon name="like" />3230
								</span>
								<span>
									<van-icon name="fire" />3230
								</span>
							</div>
						</div>
					</div>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			value: 3.5,
			tabs: [
				"全部",
				"最新",
				"畅销",
				"人气",
				"连载",
				"完结",
				"VIP",
				"免费"
			]
		};
	}
};
</script>
